<template>
    <div
        class="accountRecharge"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="查询服务类-->联名卡主动充值">
            <template slot="cardBody">
                <el-form
                    class="searchForm"
                    ref="searchForm"
                    :model="searchForm"
                    :rules="rules"
                    :inline="true"
                    label-position="right"
                    size="small"
                    label-width="100px"
                >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="主卡卡号:" label-position="left" prop="mainCardNo">
                                <el-input v-model="cardInfo_3004.CARDNO" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="交易金额:"
                                label-position="left"
                                prop="transactionAmount"
                            >
                                <el-input
                                    placeholder="请输入交易金额"
                                    v-model="searchForm.transactionAmount"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-row class="btnBox">
                                <el-button type="primary" size="small" @click="handleRecharge">充 值</el-button>
                                <el-button type="primary" size="small" @click="handleReset">重 置</el-button>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { cardProductCheck } from '@/utils/menuRules';
import { getDictValue } from '@/utils/Common';
import { RegConfig } from '@/utils/RegConfig';

export default {
    name: 'accountRecharge',
    components: {
        cardComponent,
    },
    data() {
        return {
            pageLoading: false, // 确定按钮loading
            searchForm: {
                transactionAmount: '', // 交易金额
            },
            rules: {
                transactionAmount: [
                    { required: true, message: '请输入充值金额', trigger: 'blur' },
                    { pattern: RegConfig.amount, message: '请输入正确格式的金额', trigger: 'blur' },
                ],
            },
        };
    },

    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        cardList_3601: state => state.common.cardList_3601, // 卡列表信息
        inlineParams: state => state.common.inlineParams, // 接口默认参数  --行内交易
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    mounted() {
        // 初始化方法
        this.init();
    },

    methods: {

        // 初始化
        async init() {
            // 查询数据库字典 获取 卡产品名称
            const productName = await getDictValue(this.cardList_3601, this.cardInfo_3004.CARDNO, 'PRODUCT', this);

            // 菜单校验
            cardProductCheck(productName, this.cardInfo_3004, this, '加油卡账户充值');
        },

        // 确定按钮点击处理事件
        handleRecharge() {
            this.pageLoading = true;
            this.$refs.searchForm.validate((valid) => {
                if (valid) {
                    // 设置请求参数 -- H010 交易
                    const appBody = {
                        // cardAsn: this.cardInfo_3004.CARDNO, // 卡号
                        // isAutoRecharge: '1',
                        PrimaryAcctNum: this.cardInfo_3004.CARDNO, // 主账号
                        AmtTrans: this.searchForm.transactionAmount || '', // 交易金额 以元为单位，保留两位小数
                        PosEntryModeCode: '000', // 服务点输入方式
                        // CardSequenceNumber  : '', // 卡序列号
                        AcqInstIdCode: '', // 受理机构标识码
                        Track2Data: '', // 第二磁道数据
                        Track3Data: '', // 第三磁道数据
                        MchntType: '6015', // 商户类型
                        // NatCodeIden: '', // 国密标识
                        // SpecificData: '', // 自定义域
                        // ChAuthInfo: '', // 持卡人身份认证信息
                        TranType: '', // 卡交易类型
                        RetrivlRefNum: '', // 检索参考号
                        TransDestAcctId: '', // 表示账户2
                        DateExpr: '', // 卡有效期
                        CardAccptrId: '', // 受卡方标识码
                        PosCondCode: '', // 服务点条件码
                        CardAccptrNameLoc: '', // 受卡方名称地址
                        SecRelatdCtrlInfo: '', // 安全信息控制
                        // Mac: '', // MAC
                        CurrcyCodeTrans: '', // 交易货币代码
                        IccSystemRelatedData: '', // IC卡数据域
                        MacFlag: '0', // MAC校验标识
                        // AddtnlDataPrivate: '', // 附加数据-私有
                        CardAccptrTermnlId: '', // 受卡机终端标识码
                        User_Id: '', // 用户编号
                        Invoice: '', // 是否开发票

                    };
                    const params = JSON.parse(JSON.stringify(this.inlineParams));
                    // console.log(this.defaultParams, 'this.defaultParams')
                    params.body.appHead.tranCode = 'H010';
                    params.body.appBody = appBody;

                    // 跑 H010 交易
                    this.$post.inlineTransModule.transH010(params).then((res) => {
                        this.pageLoading = false;
                        if (res.status === 200) { // 接口请求成功
                            const result = JSON.parse(res.data.jsonRes);
                            console.log(result, 'result--H010');
                            if (result.sysHead.rspCd === '000000') {
                                this.$alert('充值成功!', '提示', {
                                    customClass: 'success', type: 'success',
                                    callback: () => {
                                        this.isShowDialog = false;
                                    },
                                });
                            } else {
                                const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                                this.$alert(errorMsg, result.sysHead.rspDesc, '提示', {
                                    customClass: 'error', type: 'error',
                                }).then(() => {
                                    this.isShowDialog = false;
                                });
                            }
                        } else {
                            this.$message.error('请求失败');
                        }
                    });
                } else {
                    this.pageLoading = false;
                }
            });
        },

        // 重置按钮点击事件处理
        handleReset() {
            this.$refs.searchForm.resetFields();
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.accountRecharge {
    min-height: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    .btnBox {
        padding-right: 30px;
        text-align: center;
    }
}
</style>
